<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加活动</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <link rel="stylesheet" href="../lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">

    <style>
        body {
            background-color: #ffffff;
        }

        #find {
            background-color: #4D67F8;
        }
    </style>
</head>

<body>
    <div class="layui-form layuimini-form" lay-filter="activityForm">
        <blockquote class="layui-elem-quote layui-text">
            可以在这里修改活动哦~
        </blockquote>
        <div class="layui-form-item">
            <label class="layui-form-label required">活动名称</label>
            <div class="layui-input-block">
                <input type="text" id="actname" name="actname" lay-verify="required" lay-reqtext="用户名不能为空"
                    placeholder="请输入活动名称" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">开始日期</label>
            <div class="layui-input-inline">
                <input type="date" id="actstart" name="actstart" lay-verify="required" lay-reqtext="开始时间不能为空"
                    placeholder="请输入开始时间" value="" class="layui-input">
            </div>
            <label class="layui-form-label required">结束日期</label>
            <div class="layui-input-inline">
                <input type="date" id="actend" name="actend" lay-verify="required" lay-reqtext="结束日期不能为空"
                    placeholder="请输入结束日期" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">结束时间</label>
            <div class="layui-input-inline">
                <input type="time" id="actendtime" name="actendtime" lay-verify="required" lay-reqtext="结束时间不能为空"
                    placeholder="请输入结束时间" value="" class="layui-input">
            </div>
            <label class="layui-form-label required">活动类型</label>
            <div class="layui-input-inline">
                <select id="actype" name="actype">
                    <option value="">请选择类型</option>
                    <option value="德育">德育</option>
                    <option value="智育">智育</option>
                    <option value="体育">体育</option>
                    <option value="美育">美育</option>
                    <option value="劳育">劳育</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">活动引言</label>
            <div class="layui-input-block">
                <textarea id="actintro" name="actintro" placeholder="请输入活动引言" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">活动要求</label>
            <div class="layui-input-block">
                <textarea id="actrequire" name="actrequire" placeholder="请输入活动要求" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">量化奖励</label>
            <div class="layui-input-block">
                <textarea id="actbonus" name="actbonus" placeholder="请输入量化奖励" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">活动头图</label>
            <button type="button" class="layui-btn layui-btn-warm material" id="upimg"
                style="display: inline-block;vertical-align: middle;">+上传图片
            </button>
            <input class="layui-upload-file" type="file" accept="" name="file">
            <div id="tupian" class="layui-upload-list"
                style="display: inline-block;vertical-align: middle;margin:15px 15px 40px 132px;width: 400px;height: 200px;border-radius: 0px;border:1px dashed #1E9FFF">
                <img src="https://s2.loli.net/2022/05/09/Ll6HgRqM89FaVY5.png" id="demo1"
                    style="width: 400px;height: 200px;border:none;border-radius: 0px;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">活动策划</label>
            <input type=file accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                style="display:none" value="" id="upfile2" name="upfile2" onchange="fileChange()">
            <button type="button" onclick="upfile2.click()" class="layui-btn layui-btn-warm material">+上传文件</button>


            <input class="layui-upload-file" type="file" accept="" name="file">
            <div id="demofile" class="layui-upload-list"
                style="display: inline-block;vertical-align: middle;margin:15px 15px 40px 132px;width: 400px;height: 90px;border-radius: 0px;border:1px dashed #1E9FFF">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> </label>
            <label class="layui-form-label"> </label>
            <label class="layui-form-label"> </label>
            <div class="layui-input-inline">
                <button id="find" class="layui-btn layui-btn-normal" style="vertical-align: middle;"
                    lay-filter="saveBtn" lay-submit="">确定</button>
            </div>

        </div>

    </div>


    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script>
        var myfile = document.getElementById('upfile2');
        var filevalue = myfile.value;
        var index = filevalue.lastIndexOf('.');

        function submit() {
            //下载的代码
            var base64 = localStorage.getItem('base642');
            blob2 = dataURLtoBlob(base64);
            console.log(blob2);
            const blobUrl = window.URL.createObjectURL(blob2);
            const a = document.createElement('a');
            a.href = blobUrl;
            a.download = myfile.files[0].name + filevalue.substring(index);
            a.click();
        }

        function blobToDataURL(blob, callback) {
            let a = new FileReader();
            a.onload = function (e) {
                callback(e.target.result);
            }
            a.readAsDataURL(blob);
        }

        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
                type: mime
            });
        }

        function fileChange(e) {
            let evt = e || window.event;
            let file = evt.target.files[0];
            let reader = new FileReader();
            let reader2 = new FileReader();
            let rs = reader.readAsArrayBuffer(file);
            let blob = null;
            let blob2 = null;
            reader.onload = (e) => {
                if (typeof e.target.result === 'object') {
                    blob = new Blob([e.target.result])
                } else {
                    blob = e.target.result
                }
                console.log(blob);
                let byte = null;
                blobToDataURL(blob, function (base64) {
                    localStorage.setItem('base64', base64);
                })
            }
            btnsuccess =
                '<br>&nbsp;&nbsp;<img src="https://s2.loli.net/2022/05/09/zvlPosaT14pXh6t.jpg" class="layui-upload-img" style="width: 50px;border-radius: 0px;">&nbsp;' +
                '<span style="color:black; font-size: 15px;text-align:center">' + myfile.files[0].name + filevalue
                .substring(index) +
                '</span>&nbsp;&nbsp;<button type="button" onclick="submit()" id="submit" style="color:blue;background-color:white;border:none;" >下载提交</button></div>'
            document.getElementById('demofile').innerHTML = btnsuccess;
        }
        layui.use(['form', 'jquery', 'upload'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                upload = layui.upload;
            var aname = localStorage.getItem('aname');
            $(function () {
                $.get('/showActivity', {
                    status: 3,
                    aname: aname
                }, function (re) {
                    // console.log("reee" + JSON.stringify(re))
                    if (re == '0') {
                        layer.msg("暂无表单");
                    } else {
                        console.log(re);
                        var obj = re.data;
                        var len = re.count;
                        var intro = obj[0].intro.replace(/&nbsp;/g, '');
                        intro = intro.replace(/<br>/g, "\r\n");
                        rule = obj[0].rule.replace(/<br>/g, "\r\n");
                        lh_rule = obj[0].lh_rule.replace(/<br>/g, "\r\n");
                        // console.log("rrr" + len + re);
                        var oldno = obj[0].a_no;
                        form.val("activityForm", {
                            "actname": obj[0].a_name,
                            "actstart": obj[0].s_time,
                            "actend": obj[0].e_time,
                            "actendtime": "00:00",
                            "actype": obj[0].type,
                            "actintro": intro,
                            "actrequire": rule,
                            "actbonus": lh_rule
                        })
                        h2 = '<img src="' +
                            obj[0].link +
                            '" style="width: 400px;height: 200px;border:none;" alt="">'
                        document.getElementById('tupian').innerHTML = h2;
                        // $('#demo1').attr('src', obj[0].link);
                        var myfile = localStorage.getItem('myfile.files[0].name');
                        console.log("myfile" + myfile);
                        btnsuccess =
                            '<br>&nbsp;&nbsp;<img src="https://s2.loli.net/2022/05/09/zvlPosaT14pXh6t.jpg" class="layui-upload-img" style="width: 50px;border-radius: 0px;">&nbsp;' +
                            '<span style="color:black; font-size: 15px;text-align:center">' +
                            obj[0].a_name + "_活动策划.docx" +
                            '</span>&nbsp;&nbsp;<button type="button" onclick="submit()" id="submit" style="color:blue;background-color:white;border:none;" >下载提交</button></div>'
                        document.getElementById('demofile').innerHTML = btnsuccess;

                        var url = ''
                        var username = "";
                        var uploadInst = upload.render({
                            elem: '#upimg',
                            url: '/api/upload/', //改成您自己的上传接口
                            data: {
                                'username': username,
                                'url': url,
                                'mode': '1'
                            },
                            size: 10000,
                            accept: 'images',
                            acceptMime: 'image/*',
                            auto: false, // 取消自动提交
                            bindAction: "#upimg", //确认上传按钮
                            field: "actimg", //上传的图片part名称
                            choose: function (obj) {
                                //预读本地文件示例，不支持ie8
                                obj.preview(function (index, file, result) {
                                    $('#demo1').attr('src',
                                        result); //图片链接（base64）
                                    url = result;
                                    //result存storage
                                    //localStorage.setItem('headpic' + i, url);
                                    console.log(result);
                                });
                            }
                        });

                        //监听提交
                        form.on('submit(saveBtn)', function (data) {
                            data1 = data.field;
                            data1.actimg = obj[0].link;
                            if (obj[0].link == '')
                                layer.msg('请上传头图！');
                            else {
                                //data1.actintro = data1.actintro.split(/[(\r\n)\r\n]+/);
                                var intro = data1.actintro.split(/[(\r\n)\r\n]+/);
                                var intro2 = [];
                                // for 循环的写法
                                for (var ii = 0; ii < intro.length; ii++) {
                                    c = "&nbsp;&nbsp;" + intro[ii];
                                    intro2.push(c);
                                }
                                intro3 = intro2.join("<br>");
                                var actrequire = data1.actrequire.split(
                                    /[(\r\n)\r\n]+/);
                                var join1 = actrequire.join("<br>");
                                var actbonus = data1.actbonus.split(/[(\r\n)\r\n]+/);
                                var join2 = actbonus.join("<br>");
                                console.log(intro3);
                                console.log(join1);
                                console.log(join2);
                                data1.actintro = intro3;
                                data1.actrequire = join1;
                                data1.actbonus = join2;
                                data1.ano = oldno;
                                $.get('/editActivity', data1, function (re) {
                                    if (re == '1') {
                                        layer.msg('修改成功！');
                                    } else {
                                        layer.msg('修改失败！');
                                    }

                                });
                            }
                            return false;

                        });


                    }
                })
            })

            // $("#actname").val("lalala");把父注释掉后可以用
        });
    </script>
</body>

</html>